<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>首页</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <link rel="stylesheet" href="/static/swiper/swiper-3.4.2.min.css">
  <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .footer{
            width: 100%;
            height: 100px;
            line-height: 100px;
            background-color: #393D49;
            text-align: center;
            color: #ffffff;
        }

        table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }
        table td,
        table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }
        table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }

        /* blockquote 样式 */
        blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
        }

        /* code 样式 */
        code {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
        }
        pre code {
            display: block;
        }

        /* ul ol 样式 */
        ul, ol {
            margin: 10px 0 10px 20px;
        }
        .swiper-container {
            width: 100%;
            height: 500px;
            max-height: 438px;
            max-height: 790px;
            
        }
        .gallery-top {
          height: 80%;
          width: 100%;
          }     
        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
            }     
        .gallery-thumbs .swiper-slide {
          width: 25%;
          height: 100%;
          opacity: 0.4;
          }     
        .gallery-thumbs .swiper-slide-active {
          opacity: 1;
          }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-blockbox;
            display: -webkit-block;
            display: block;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-container2 {
        width: 100%;
        height: 400px;
        margin: 20px auto;
        }

        .swiper-p2 .img{
          overflow: hidden;
        }
        .swiper-p2 img{
          width: 100%;
          height: 300px;
          transition: all 0.6s;
        }

        .swiper-p2 img:hover{
          
          transform: scale(1.2); /* 放大1.2倍 */
        }


        .swiper-p2 .title{
          width: 100%;
          height: 30px;
          float: left;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight: bold;
          margin-top: 10px;
        }

        .swiper-p2 .buyMoney{
          width: 26%;
          height: 38px;
          float: left;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight: bold;
          margin-top: 10px;
          color: red;
          line-height: 38px;
        }
        
        .swiper-slide .buyBtn{
          width: 40%;
          height: 38px;
          float: right;
          margin-top: 10px;
        }

        .swiper-slide .delMoney{
          width: auto;
          height: 38px;
          float: left;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight: bold;
          margin-top: 10px;
          color: #C0C0C0;
          line-height: 38px;
          text-decoration:line-through;
          font-size: 18px;
        }

        </style>
</head>
<body>
 <script src="/static/swiper/swiper-3.4.2.min.js"></script>
 <div th:replace="include :: header"></div>
<div class="layui-row layui-col-space10" style="max-width: 1200px; margin:20px auto;">
    <div class="layui-col-md12">
      <div class="layui-row grid-demo">
        <div class="layui-col-md6" style="max-width: 600px;">
          <div class="swiper-container">
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
               <div class="swiper-slide" th:style="|background-image:url(${pd.pdPic})|"></div>
                </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                <div class="swiper-slide" th:style="|background-image:url(${pd.pdPic});background-size: 149px 80px;|"></div>
                </div>
        </div>
        </div>
      </div>
        <div class="layui-col-md6" style="">
            <form class="layui-form" action="">
                <div class="layui-form-item" style="margin-bottom: 25px;">
                    <div class="layui-input-block">
                      <h1 id="title" th:text="${pd.pdName}">测试商品1</h1>
                    </div>
                  </div>
                  <input id="id" name="id" th:value="${pd.pdId}" hidden/>
                <div class="layui-form-item" style="margin-bottom: 25px;">
                  <label class="layui-form-label">产品分类:</label>
                  <div class="layui-input-block">
                    <button class="layui-btn layui-btn-primary" th:text="${pd.clName}">产品分类1</button>
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 25px;">
                  <label class="layui-form-label">当前价格:</label>
                  <div class="layui-input-block">
                    <h1 style="color:crimson;font-weight:bold;display:inline ;" th:text="|￥${pd.pdPrice}|">0.01</h1>
                    <h1 style="display:inline ;color: #C0C0C0;text-decoration: line-through;margin-left: 10px;" th:text="${pd.pdPrice2}">100</h1>
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 25px;">
                  <label class="layui-form-label">购买数量:</label>
                  <div class="layui-input-inline">
                      <a class="layui-btn layui-btn-small layui-btn-normal" id="reduce" style="display: inline;float: left;padding: 0 10px;"><i class="layui-icon">－</i></a>
                    <input th:if="${pd.pdType == 0}" type="number" id="num" name="num" required lay-verify="required" value="1" autocomplete="off" class="layui-input" style="width: 30%;float: left;font-size: 19px;
                    padding-left: 10px;" min="1" th:max="${pd.stNum}">
                    <input th:if="${pd.pdType == 1}" type="number" id="num" name="num" required lay-verify="required" value="1" autocomplete="off" class="layui-input" style="width: 30%;float: left;font-size: 19px;
                    padding-left: 10px;" min="1" th:max="${pd.pdGdNum}">
                    <a class="layui-btn layui-btn-small layui-btn-warm" id="plus" style="display: inline;float: left;padding: 0 10px;"><i class="layui-icon">＋</i></a>
                      <p style="display: inline;height: 38px;line-height: 38px;float: left;">(库存：<th:block th:if="${pd.pdType == 0}" th:text="${pd.stNum}"></th:block><th:block th:if="${pd.pdType == 1}" th:text="${pd.pdGdNum}"></th:block>件)</p>
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 25px;">
                  <label class="layui-form-label">联系方式:</label>
                  <div class="layui-input-block">
                    <input type="text" id="contact" name="contact" required lay-verify="required" placeholder="查询订单凭证" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 25px;">
                  <label class="layui-form-label">取货密码:</label>
                  <div class="layui-input-block">
                    <input type="text" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 25px;">
                  <label class="layui-form-label">支付方式:</label>
                  <div class="layui-input-block">
                    <input type="radio" value="1" name="pay"checked><img src="/uploads/alipay.jpg" style="margin-left: -20px;">
                    <input type="radio" value="2" name="pay" style="margin-left: 10px;"><img src="/uploads/qqpay.jpg" style="margin-left: -20px;">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="buy">立即购买 ›</button>
                  </div>
                </div>
              </form>
              </div>
          
        </div>
        <hr class="layui-bg-green" style="margin-top:10px;">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote" style="background-color:#eee;margin-top: 20px; "><h2>商品介绍</h2></blockquote>
            <th:block th:utext="${pd.pdDes}"></th:block>
        </div>
        <hr class="layui-bg-green" style="margin-top:10px;">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote" style="background-color:#eee;margin-top: 20px; "><h2>商品列表</h2></blockquote>
            <div class="swiper-container swiper-container2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-p2">
                      <div class="img">
                        <a href="#">
                          <img src="https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ckbk81xnoasghzq4ftxv/air-force-1-07-lv8-3-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-w9HRsj.jpg" />
                      </a>
                      </div>  
                        <a href="#">
                          <h4 class="title">NIKE鞋</h4>
                       </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>  400</h3 ><h3 class="delMoney">500</h3>
                          <div class="buyBtn">
                          <a  class="layui-btn layui-btn-radius layui-btn-normal" href="#">立即购买  <i class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                  <div class="swiper-slide swiper-p2">
                      <div class="img">
                        <a href="#">
                          <img src="https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ckbk81xnoasghzq4ftxv/air-force-1-07-lv8-3-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-w9HRsj.jpg" />
                      </a>
                      </div>  
                        <a href="#">
                          <h4 class="title">NIKE鞋</h4>
                        </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>  400</h3 ><h3 class="delMoney">500</h3>
                          <div class="buyBtn">
                          <a  class="layui-btn layui-btn-radius layui-btn-normal" href="#">立即购买  <i class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                  <div class="swiper-slide swiper-p2">
                      <div class="img">
                        <a href="#">
                          <img src="https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ckbk81xnoasghzq4ftxv/air-force-1-07-lv8-3-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-w9HRsj.jpg" />
                      </a>
                      </div>  
                        <a href="#">
                          <h4 class="title">NIKE鞋</h4>
                        </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>  400</h3 ><h3 class="delMoney">500</h3>
                          <div class="buyBtn">
                          <a  class="layui-btn layui-btn-radius layui-btn-normal" href="#">立即购买  <i class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                  <div class="swiper-slide swiper-p2">
                      <div class="img">
                        <a href="#">
                          <img src="https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ckbk81xnoasghzq4ftxv/air-force-1-07-lv8-3-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-w9HRsj.jpg" />
                      </a>
                      </div>  
                        <a href="#">
                          <h4 class="title">NIKE鞋</h4>
                        </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>  400</h3 ><h3 class="delMoney">500</h3>
                          <div class="buyBtn">
                          <a  class="layui-btn layui-btn-radius layui-btn-normal" href="#">立即购买  <i class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                  <div class="swiper-slide swiper-p2">
                      <div class="img">
                        <a href="#">
                          <img src="https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ckbk81xnoasghzq4ftxv/air-force-1-07-lv8-3-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-w9HRsj.jpg" />
                      </a>
                      </div>  
                        <a href="#">
                          <h4 class="title">NIKE鞋</h4>
                        </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>  400</h3 ><h3 class="delMoney">500</h3>
                          <div class="buyBtn">
                          <a  class="layui-btn layui-btn-radius layui-btn-normal" href="#">立即购买  <i class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                <div class="swiper-slide swiper-p2">
                    <div class="img">
                      <a href="#">
                        <img src="https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/ckbk81xnoasghzq4ftxv/air-force-1-07-lv8-3-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-w9HRsj.jpg" />
                    </a>
                    </div>  
                      <a href="#">
                        <h4 class="title">NIKE鞋</h4>
                      </a>
                      <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>  400</h3 ><h3 class="delMoney">500</h3>
                        <div class="buyBtn">
                        <a  class="layui-btn layui-btn-radius layui-btn-normal" href="#">立即购买  <i class="layui-icon">&#xe602;</i></a>
                      </div>
                  </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-p2"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-p2"></div>
                <div class="swiper-button-prev swiper-p2"></div>
            </div>
        </div>
      </div>
    </div>
 <div th:replace="include :: footer"></div>
<script>
    var pageWidth = window.screen.width;
    var viewNum = 1;
    if(pageWidth >= 1200){
      viewNum = 3;
    }else if(pageWidth >= 720){
      viewNum = 2;
    }else{
      viewNum = 1;
    }
    var swiper = new Swiper('.swiper-container2', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: viewNum,
        centeredSlides: false,
        paginationClickable: true,
        paginationType: 'progress',
        spaceBetween: 30,
        loop:true,
        autoplay: 2500
    });
    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    
    </script>
<script src="/static/layui/layui.js"></script>
<script th:inline="javascript">
//一般直接写在一个js文件中
layui.use(['carousel','element','form','jquery'], function(){
  var carousel = layui.carousel;
  var element = layui.element;
  var form = layui.form;
  var $ = layui.jquery;
  var type = [[${pd.pdType}]];
  var maxNum = 0;
  if(type == 0){
      maxNum = [[${pd.stNum}]];
  }else{
      maxNum = [[${pd.pdGdNum}]];
  }
  $("#plus").click(function(){
    var num = $("#num").val();
    var num = Number(num);
    if(num < maxNum){
        $("#num").val(num+1);
    }
  });

  $("#reduce").click(function(){
    var num = $("#num").val();
    var num = Number(num);
    if(num > 1){
      $("#num").val(num-1);
    }
  });


  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    ,anim: 'updown' //切换动画方式
  });
  //获取当前iframe的name值
	var iframeObj = $(window.frameElement).attr('name');
  form.on('submit(buy)', function(data){
    //layer.msg(JSON.stringify(data.field));
    var dt = data.field;
    if(dt.num >  maxNum){
        layer.warn("当前库存不足");
    }else{
        var url = "/order/?id="+dt.id+"&num="+dt.num+"&pay="+dt.pay+"&contact="+dt.contact+"&password="+dt.password;

        parent.page("确认订单", url, iframeObj, w = "700px", h = "620px");
    }
    return false;
  });
});

var iframeObjName;

//父级弹出页面
function page(title, url, obj, w, h) {
	if(title == null || title == '') {
		title = false;
	};
	if(url == null || url == '') {
		url = "404.html";
	};
	if(w == null || w == '') {
		w = '700px';
	};
	if(h == null || h == '') {
		h = '350px';
	};
	iframeObjName = obj;
	//如果手机端，全屏显示
	if(window.innerWidth <= 768) {
		var index = layer.open({
			type: 2,
			title: title,
			area: [320, h],
			fixed: false, //不固定
			content: url
		});
		layer.full(index);
	} else {
		var index = layer.open({
			type: 2,
			title: title,
			area: [w, h],
			fixed: false, //不固定
			content: url
		});
	}
}
</script> 
</body>
</html>